<?php
include_once 'template/header.php';
?>
<script type="text/javascript">
    // 参考：http://www.cnblogs.com/qjqcs/p/5852958.html
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 获取日期
    $("#datepicker1").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-1:+0",
        showAnim: 'slideDown', //show 默认,slideDown 滑下,fadeIn 淡入,blind 百叶窗,bounce 反弹,Clip 剪辑,drop 降落,fold 折叠,slide 滑动
        maxDate: -1, //最小日期，可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
        defaultDate: -7, //默认日期，同上
        duration: 'fast', //动画展示的时间，可选是"slow", "normal", "fast",''代表立刻，数字代表毫秒数
        firstDay: 1,
        currentText: '今天', //设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。
        gotoCurrent: false, //如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天。
        dateFormat: "yy-mm-dd",
        onClose: function (selectedDate) {
            $("#datepicker2").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#datepicker2").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-1:+0",
        showAnim: 'slideDown', //show 默认,slideDown 滑下,fadeIn 淡入,blind 百叶窗,bounce 反弹,Clip 剪辑,drop 降落,fold 折叠,slide 滑动
        maxDate: -1, //最大日期，同上
        duration: 'fast', //动画展示的时间，可选是"slow", "normal", "fast",''代表立刻，数字代表毫秒数
        firstDay: 1, //设置一周中的第一天。默认星期天0，星期一为1，以此类推。
        currentText: '今天', //设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。
        gotoCurrent: false, //如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天。  
        dateFormat: "yy-mm-dd",
        onClose: function (selectedDate) {
            $("#datepicker1").datepicker("option", "maxDate", selectedDate);
        }
    });
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption({
        title: {
            text: '普元官网自然搜索数据',
            subtext: '（单位：次）',
            left: 'left' //标题居中 
        },
        tooltip: {},
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false}, //  数据视图
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true}, //  刷新
                saveAsImage: {show: true}, //  下载为图片
                right: '5%',
            }
        },
        legend: {
            data: ['日期', '展示量', '点击量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        dataZoom: [
            {
                id: 'dataZoomX',
                type: 'slider',
                xAxisIndex: [0],
                filterMode: 'filter', // 设定为 'filter' 从而 X 的窗口变化会影响 Y 的范围。
                start: 0,
                end: 100
            },
        ],
        series: [
            {
                "name": "cumulate_user",
                "type": "bar",
                "data": []
            }
        ]
    });

    // 按下提交按钮后，返回input文本框的值
    var option;
    // http://www.cnblogs.com/haitao-fan/p/3908973.html
    function jsonData() {
        var datein = {
            date_start: $("input[name=datepicker1]").val(),
            date_end: $("input[name=datepicker2]").val(),
        };
        $.ajax({
            type: "post",
            async: false, // false为同步执行，true为异步执行
            url: "baidu/baidu.php",
            data: datein,
            dataType: "json",
            success: function (result) {
                if (result) {
                    option = {
                        xAxis: {
                            data: result.label
                        },
                        series: [
                            {
                                name: '展示量',
                                data: result.display,
                                type: 'bar',
                                label: {
                                    normal: {
                                        show: true,
                                    }
                                },
                            },
                            {
                                name: '点击量',
                                type: 'bar',
                                data: result.click,
                                label: {
                                    normal: {
                                        show: true,
                                    }
                                },
                            },
                        ]
                    };
                    myChart.setOption(option);
                }
            }
        })
    }
    jsonData();
</script>    
<?php
include_once 'template/header.php';
?>